<template>
  <div class="gongdan-more-info">
    <div class="gongdan-more-info-head">
      <div @click="GoBack">
        <!-- <router-link to="/main/gongdan"> -->
          <my-button color="none">
            <i class="el-icon-arrow-left"></i>返回
          </my-button>
          <!-- </router-link> -->
      </div>

      <div style="display: flex">
        <div style="margin-right: 10px">
          <my-button :color="true">更改状态</my-button>
        </div>
        <div style="margin-right: 10px">
          <my-button :color="true">转交工单</my-button>
        </div>
        <my-button :color="true">编辑工单</my-button>
      </div>
    </div>
    <div style="display: flex">
      <div class="gongdan-more-info-main">
        <div class="gongdan-more-info-main-head">客户报价</div>
        <div class="gongdan-more-info-main-p">
          客户需要型号SU-CC8990的产品的详细报价，请速联系。
        </div>
        <my-textarea rows="10" ph="请输入回复内容"></my-textarea>
        <div class="gongdan-more-info-main-tip">
          📎 添加附件（最多上传5个附件，单个文件最大20M）
        </div>
        <my-button :color="true" width="80">回复</my-button>
        <div style="height: 25px"></div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="回复记录" name="first">
            <div
              class="gongdan-more-info-main-item"
              v-for="i in [1, 2, 3]"
              :key="i"
            >
              <div class="gongdan-more-info-main-item-img"></div>
              <div style="width: 812px">
                <div class="gongdan-more-info-main-item-title">
                  客服小美
                  <span style="font-size: 12px; color: #cccccc"
                    >2020/06/09 20:09</span
                  >
                </div>
                <div class="gongdan-more-info-main-item-msg">
                  收到，这个报价市场部的同时还没有出，预计下周完成。收到，这个报价市场部的同时还没有出，预计下周完成。收到，这个报价市场部的同时还没有出，预计下周完成。
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="操作日志" name="second">
            <div
              class="gongdan-more-info-main-item"
              v-for="i in [1, 2, 3]"
              :key="i"
            >
              <div class="gongdan-more-info-main-item-img"></div>
              <div style="width: 812px">
                <div class="gongdan-more-info-main-item-title">
                  客服小美
                  <span style="font-size: 12px; color: #cccccc"
                    >2020/06/09 20:09</span
                  >
                </div>
                <div class="gongdan-more-info-main-item-msg">创建了工单</div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="gongdan-more-info-info">
        <session-box-item :infoItems="gongdanItems"></session-box-item>
        <el-divider></el-divider>
        <session-box-item :infoItems="kehuItems" edit="true">
          <span class="session-box-item-label">客户标签</span>
          <span>
            <el-tag type="success">已上市</el-tag>
            <span style="padding: 5px"></span>
            <el-tag type="success">潜在客户</el-tag>
          </span>
        </session-box-item>
      </div>
    </div>
  </div>
</template>

<script>
import MyButton from "@/components/MyInput/MyButton";
import MyTextarea from "@/components/MyInput/MyTextarea";
import SessionBoxItem from "@/components/Session/SessionBox/SessionBoxItem";

export default {
  components: {
    MyButton,
    MyTextarea,
    SessionBoxItem,
  },
  created() {
    this.$store.commit("setTitle", "工单详情");
    this.$store.commit('NavStyleClear','工单')
  },
  data() {
    return {
      activeName: "first",
      gongdanItems: {
        name: "工单信息",
        items: [
          {
            label: "工单分类",
            info: "分类一",
          },
          {
            label: "抄送人",
            info: "王涛，吴敏儿",
          },
          {
            label: "优先级",
            info: "低",
          },
          {
            label: "工单状态",
            info: "处理中",
          },
          {
            label: "受理客服组",
            info: "客服组一",
          },
          {
            label: "受理客户",
            info: "王先生",
          },
          {
            label: "创建时间",
            info: "2020/06/09 20:09",
          },
          {
            label: "更新时间",
            info: "2020/06/09 20:09",
          },
        ],
      },
      kehuItems: {
        name: "客户信息",
        items: [
          {
            label: "客户名称",
            info: "北京市客户",
          },
          {
            label: "真实姓名",
            info: "王伟",
          },
          {
            label: "客户电话",
            info: "-",
          },
          {
            label: "客户邮箱",
            info: "-",
          },
          {
            label: "客户公司",
            info: "-",
          },
          {
            label: "客户地址",
            info: "-",
          },
          {
            label: "客户等级",
            info: "普通客户",
          },
          {
            label: "客户来源",
            info: "访客转化",
          },
          {
            label: "客户备注",
            info: "-",
          },
        ],
      },
    };
  },
  methods: {
    GoBack () {
      this.$router.back()
    }
  }
};
</script>

<style>
.gongdan-more-info-head {
  width: 942px;
  display: flex;
  justify-content: space-between;
  margin: 0 0 10px;
}

.gongdan-more-info-main {
  width: 890px;
  height: 770px;
  background-color: #ffffff;
  padding: 30px 25px;
}

.gongdan-more-info-main-head {
  font-family: "PingFangHK-Medium", "PingFang HK Medium", "PingFang HK",
    sans-serif;
  font-weight: 500;
  font-size: 28px;
}

.gongdan-more-info-main-p {
  font-family: "PingFangHK-Regular", "PingFang HK", sans-serif;
  font-weight: 400;
  font-size: 14px;
  margin: 20px 0;
}

.gongdan-more-info-main-tip {
  font-family: "PingFangHK-Regular", "PingFang HK", sans-serif;
  color: #006eff;
  margin: 5px 0 20px;
}

.gongdan-more-info-main-item {
  width: 892px;
  height: 89px;
  display: flex;
  flex-wrap: wrap;
}

.gongdan-more-info-main-item-img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: orange;
  margin: 0 10px;
}

.gongdan-more-info-main-item-title {
  font-size: 14px;
  color: #006eff;
  margin: 5px 0 10px;
}

.gongdan-more-info-main-item-msg {
  font-family: "PingFangHK-Regular", "PingFang HK", sans-serif;
  font-size: 14px;
  padding-bottom: 5px;
  border-bottom: 1px solid #cccccc;
}

.gongdan-more-info-info {
  width: 340px;
  height: 700px;
  background-color: #ffffff;
  margin-left: 10px;
  padding-top: 20px;
}
</style>